<template>
  <div class="app-container bg-white">
    <div class="page-body">
      <el-form :inline="true" ref="form" :model="myForm">
        <el-form-item>
          <el-input v-model.trim="myForm.mchName" placeholder="请输入商户名称" maxlength="30" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="myForm.storeName" placeholder="请输入门店名称" maxlength="30" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="myForm.storeNo" placeholder="请输入门店编号" maxlength="30" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="myForm.status" placeholder="请选择门店状态" filterable clearable>
            <el-option v-for="item in statusDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-input v-model.trim="myForm.contacts" placeholder="请输入联系人" maxlength="30" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model.trim="myForm.contactPhone" placeholder="请输入联系电话" maxlength="30" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="myForm.bindStatus" placeholder="请选择绑定状态" filterable clearable>
            <el-option v-for="item in bindStatusDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="myForm.saleMode" placeholder="请选择绑定状态" filterable clearable>
            <el-option v-for="item in saleDataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
          <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button size="mini" type="success" icon="el-icon-document-add" @click="addOption()">新建门店</el-button>
      </div>
      <!-- 门店列表 -->
      <el-table class="margin_top_20" ref="multipleTableContent" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="storeName" label="门店名称"></el-table-column>
        <el-table-column prop="id" label="门店编码"></el-table-column>
        <el-table-column prop="mchName" label="商户名称"></el-table-column>
        <el-table-column prop="mchId" label="商户编码"></el-table-column>
        <el-table-column prop="contactPhone" label="联系电话"></el-table-column>
        <el-table-column prop="contacts" label="门店负责人"></el-table-column>
        <el-table-column prop="equipmentCount" label="设备数"></el-table-column>
        <el-table-column prop="operationTime" label="创建时间"></el-table-column>
        <el-table-column prop="bindStatus" label="绑定状态">
          <template slot-scope="scope">
            <el-switch :value="scope.row.bindStatus == 0"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="showOption(scope.row.id)">查看</button>
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="editOption(scope.row)">编辑</button>
            <button class="my-btn my-btn--mini my-btn--primary plain" @click="BindingDevice(scope.row)">绑定设备</button>
            <!-- <button class="my-btn my-btn--mini my-btn--danger plain" @click="handleDeletes(scope.row)">删除</button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="text-center">
        <br />
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
      </div>
    </div>

    <!-- 绑定设备的弹窗 -->
    <el-dialog title="绑定设备" :visible.sync="dialogFormVisible" width="480px">
      <el-form :model="dialogData" :rules="rules" ref="ruleForm" :label-width="'100px'">
        <el-form-item label="设备名称" prop="equipmentName">
          <el-input v-model="dialogData.equipmentName" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="设备编号" prop="equipmentNo">
          <el-input v-model="dialogData.equipmentNo" placeholder="请输入设备编号"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enableStatus">
          <el-switch v-model="switchValue"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Setting from '@/settings'
import { GetMerchantShopList } from '@/views/merchant-management/services'
import { equipmentMerchabt } from '@/api/merchants'

export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      loading: false,
      pageData: [],
      pageCount: 0,

      switchValue: true, //绑定是否启用
      dialogData: {
        equipmentName: '', //设备名称
        equipmentNo: '', //设备编号
        enableStatus: '', //启用状态：0启用，1禁用
        mchType: JSON.parse(this.$store.state.user.userInfo).userType, //商户类型 默认 0 平台  1 普通商户
        mchId: null, //商户id
        storeid: '', //店铺ID
      },
      dialogFormVisible: false, //弹窗开关
      storebrandsValue: '',
      pageNum: 1,
      myForm: {
        mchName: '',
        mchId: JSON.parse(this.$store.getters.userInfo).mchId,
        storeNo: '', // 店铺编号
        storeName: '', // 店铺名
        // saleMode: '', // 销售类型 0 没有 1 分销 2 采销 3 分+采
        contacts: '', // 门店负责人
        contactPhone: '', // 联系电话
        // status: '', // 店铺状态 0未审核  1 审核通过  2 审核失败
        bindStatus: '', // 绑定状态 0 已绑定 1未绑定
      },
      loading: false,
      cindex: 4,
      datas: [],
      // value: '',
      isshow: false,
      upcl: null,
      pt: null,
      selecttags: null,
      selectbrands: null,
      cityOptions: [],
      checkedCities: [],
      storetag: [
        { value: '0', label: '否' },
        { value: '1', label: '是' },
      ],
      imgurl: `${process.env.VUE_APP_FILE_URL}/`,
      // value: true,
      fullscreenLoading: false,
      brandtitle: '',
      storename: '',
      rules: {
        equipmentName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        equipmentNo: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
      },
      saleDataList: [
        { value: '1', label: '分销' },
        { value: '2', label: '采销' },
        { value: '3', label: '分销 + 采销' },
      ],
    //   statusDataList: [
    //     { value: '0', label: '未审核' },
    //     { value: '1', label: '审核通过' },
    //     { value: '2', label: '审核失败' },
    //   ],
      bindStatusDataList: [
        { value: '0', label: '已绑定' },
        { value: '1', label: '未绑定' },
      ],
    }
  },
  created() {
    this.getPageDataList()
  },
  methods: {
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },
    getPageDataList() {
      this.loading = true
      GetMerchantShopList({
        ...this.myForm,
        mchId: JSON.parse(this.$store.getters.userInfo).mchId,
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      })
        .finally(() => (this.loading = false))
        .then(res => {
          if (res && res.code == 200) {
            this.pageData = res.data.list
            this.pageCount = res.data.total

            if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1
              this.getPageDataList()
            }
          }
        })
    },
    resetOption() {
      this.pageIndex = 1
      this.myForm.mchName = ''
      this.myForm.storeNo = ''
      this.myForm.storeName = ''
    //   this.myForm.saleMode = ''
      this.myForm.contacts = ''
      this.myForm.contactPhone = ''
    //   this.myForm.status = ''
      this.myForm.bindStatus = ''
      this.getPageDataList()
    },

    BindingDevice(val) {
      //打开弹窗并给需要传达参数赋值
      this.dialogFormVisible = true
      // this.dialogData.bindStatus = val.isPhysicalStore
      this.dialogData.storeid = val.id
      this.dialogData.mchId = val.mchId
    },
    async dialogConfirm() {
      //绑定设备
      this.dialogData.enableStatus = this.switchValue ? 1 : 0
      let bindingRes = await equipmentMerchabt(this.dialogData)
      if (bindingRes.code == 200) {
        this.dialogFormVisible = false
        this.$message.success('绑定设备成功！')
        this.dialogData.equipmentName = null
        this.dialogData.equipmentNo = null
        this.dialogData.enableStatus = null
        this.dialogData.mchId = null
        this.dialogData.storeid = null
      } else {
        //  this.$message.error('加载失败，请重新刷新列表');
      }
    },
    addOption() {
      this.$router.push({
        name: 'MerchantShopAdd',
      })
    },
    editOption(item) {
      this.$router.push({
        name: 'MerchantShopEdit',
        params: { val: item },
      })
    },
    showOption(rowId) {
      this.$router.push({
        name: 'MerchantShopShow',
        query: { id: rowId },
      })
    },
  },
}
</script>

<style scoped lang="scss">
.width_104 {
  width: 104px;
}
</style>
